<template>
	<view class="address-list">
		<view class="block" v-for="(item, idx) in dataObj.list" :key="item.id" @click="onSortTap(item.id)">
			<view class="select" :class="item.is_def === 1 ? 'selected' : ''" @click.native.stop="onSelectTap(idx)"></view>
			<view class="arrow"></view>
			<view class="name">
				{{item.name}}
				<span class="mobile">{{item.mobile}}</span>
			</view>
			<view class="address">{{item.address}}</view>
		</view>
		<view class="footer">
			<view class="btn" @click="onSortTap()">新建收货地址</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					list: []
				}
			}
		},
		onShow() {
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 地址选择
			onSelectTap(index) {
				const id = this.dataObj['list'][index]['id'];
				this.postDefData(id);
				// 删除
				// this.postDelData(id);
			},
			// 新增或者编辑地址
			onSortTap(id) {
				if(id) {
					// 编辑
					uni.navigateTo({
						url: '/pages/user/address/source?id=' + id
					});
				} else {
					// 新增
					uni.navigateTo({
						url: '/pages/user/address/source'
					});
				}
			},
			postDefData(id) {
				this.$Requset({
					url: this.$Api['address']['setDefaultOne'],
					data: {
						id: id
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						uni.navigateBack();
					},
					fail: (err) => {
						requestErrorTip('toast', err);
					}
				})
			},
			// 获取列表数据
			getData() {
				this.$Requset({
					url: this.$Api['address']['list'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['list'] = data;
					},
					fail: (err) => {
						requestErrorTip('toast', err);
					}
				})
			},
			// 删除数据
			postDelData(id) {
				this.$Requset({
					url: this.$Api['address']['remove'],
					data: {
						id: id
					},
					success: (res) => {
						const { msg, status } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.getData();
					},
					fail: (err) => {
						requestErrorTip('toast', err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.address-list{
		padding-top: 18rpx;
		padding-bottom: 100rpx;
		.block{
			position: relative;
			padding-left: 100rpx;
			padding-right: 80rpx;
			.select{
				position: absolute;
				top: 36rpx;
				left: 36rpx;
				width: 40rpx;
				height: 40rpx;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100%;
				background-image: url(../../static/images/cart/select.png);
			}
			.selected{
				background-image: url(../../static/images/cart/selected.png);
			}
			.arrow{
				position: absolute;
				top: 50rpx;
				right: 36rpx;
				width: 30rpx;
				height: 50rpx;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 30rpx 30rpx;
				background-image: url(../../static/images/common/arrow-right.png);
			}
			.name{
				height: 40rpx;
				line-height: 40rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				margin-bottom: 8rpx;
				.mobile{
					color: #7F7F7F;
					margin-left: 14rpx;
				}
			}
			.address{
				max-height: 80rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #1A1A1A;
			}
		}
		.footer{
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			padding: 15rpx 36rpx;
			background-color: #FFFFFF;
			border-top: 1rpx solid #E4EAED;
			.btn{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
		}
	}
</style>
